<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>

    <!-- player skin -->
    <link rel="stylesheet" th:href="@{/video/skin/skin.css}">

    <!-- site specific styling -->
    <style>
        body {
            font: 12px "Myriad Pro", "Lucida Grande", sans-serif;
            text-align: center;
            padding-top: 5%;
        }

        .flowplayer {
            width: 80%;
        }
    </style>

    <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ -->
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

    <!-- include flowplayer -->
    <script th:src="@{/video/flowplayer/flowplayer.min.js}"></script>

    <script th:src="@{/video/flowplayer/hls.min.js}"></script>

</head>

<body>


<div id="area1" data-ratio="0.4167">
    <video id="vid1" preload="none">
        <source type="video/mp4" src="https://edge.flowplayer.org/bauhaus.mp4">
    </video>
</div>

<script>
    $(function () {
        let video = $("#area1").flowplayer({
            src: "https://edge.flowplayer.org/bauhaus.mp4",
            swf: "/video/flowplayer/flowplayer.swf",
            title: "my video",
            autoplay: false,
            preload: "none",
            title: "Video about videos",
            rewind: true,
            loop: false,//播放器是否应循环播放当前视频。默认：false
            poster: 'http://cdn-img.tadpoles.xyz/contents/videos_screenshots/72000/72281/preview.mp4.jpg',
            autopause: true,
            plugins: []
        });
        video.on('seeking seeked pause ready resume', function (e, api) {
            let type = e.type;
            console.log(type,api);
        });
    });
</script>
</body>
